<template>
  <div class="code">
    <!--    <div class="codeBox" id="codeBox">-->
    <!--      <div class="hospitalName">{{patientItem.hospitalName}}</div>-->
    <!--      <div class="deptName">{{patientItem.deptName}}</div>-->
    <!--      <div class="createTime">登记日期:{{patientItem.createTime}}</div>-->
    <!--      <div class="info">-->
    <!--        <span>顾客姓名:{{patientItem.patientName}}</span>-->
    <!--        <span>性别:<dict-tag :options="dict.type.sys_user_sex" :value="patientItem.sex" style="display: inline-block"/></span>-->
    <!--        <span>年龄:{{patientItem.age}}</span>-->
    <!--      </div>-->
    <!--      <div class="info">-->
    <!--        <span>顾客ID:{{patientItem.patientId}}</span>-->
    <!--        <span>顾客编号:{{patientItem.visitNum}}</span>-->
    <!--      </div>-->
    <!--      <div class="qrcode" ref="qrCodeDiv"></div>-->
    <!--    </div>-->
    <div class="codeBox" id="codeBox">
      <div class="btmBox">
        <div class="left">
          <div class="hospitalName">{{patientItem.hospitalName}}</div>
          <div class="big">{{patientItem.deptName}}</div>
          <div class="big">顾客姓名:{{patientItem.patientName}}</div>
          <div class="big">性别:<dict-tag :options="dict.type.sys_user_sex" :value="patientItem.sex" style="display: inline-block"/></div>
          <div class="big">年龄:{{patientItem.age}}</div>
          <div class="big">顾客ID:{{patientItem.patientId}}</div>
          <div class="small">顾客编号:{{patientItem.visitNum}}</div>
          <div class="small">登记日期:{{patientItem.createTime}}</div>
        </div>
        <div class="right">
          <div class="qrcode" ref="qrCodeDiv"></div>
        </div>
      </div>
    </div>
    <div  class="dialog-footer">
      <el-button  @click="printCode">打 印</el-button>
    </div>

  </div>

</template>

<script>
import QRCode from 'qrcodejs2'
import print from 'print-js'

export default {
  name: "recognizeCode",
  props: ['patientItem'],
  dicts: [
    "sys_user_sex",
  ],
  data() {
    return {

    }
  },
  methods: {
    printCode(){
      setTimeout(function () {
        print({
          printable: 'codeBox', //打印区域
          type: 'html', //打印类型html，还可以是json，image等，详细写法见官网
          style: `
           @page { size:auto;margin: 5mm 10mm;}
           body {zoom: 40%;}
           .codeBox{
              .btmBox{
                display: flex;
                justify-content: space-around;
                align-items: center;
                .left{
                  .hospitalName{
                    font-size: 24px;
                    font-weight: bold;
                  }
                  .big{
                    font-size: 20px;
                  }
                  .small{
                    font-size: 18px;
                  }
                }
              }
            }
          `,
          scanStyles: false,
          targetStyles: ['*'],//css样式，写成*代表打印样式完全继承你页面的样式
          HonorMarginPadding: true,
        })
      }, 500)



    },
    bindQRCode() {
      this.$nextTick(() => {
        new QRCode(this.$refs.qrCodeDiv, {
          text: this.patientItem.visitNum,//url地址  文本等需要转换为二维码的内容
          // width: 150,
          // height: 150,
          width: 120,
          height: 120,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
        });
      });
    },
  },
  mounted() {
    this.bindQRCode();
  },

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.code{
  //.codeBox{
  //  display: flex;
  //  flex-direction: column;
  //  justify-content: center;
  //  align-items: center;
  //  font-weight: bold;
  //  font-size: 16px;
  //  >div{
  //    margin-bottom: 10px;
  //  }
  //  .hospitalName{
  //    font-size: 28px;
  //  }
  //  .deptName{
  //    font-size: 20px;
  //  }
  //  .info{
  //    width: 330px;
  //    display: flex;
  //    justify-content: space-between;
  //  }

  .codeBox{
    .btmBox{
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left{
        .hospitalName{
          font-size: 24px;
          font-weight: bold;
        }
        .big{
          font-size: 20px;
        }
        .small{
          font-size: 18px;
        }
      }
    }
  }
  ::v-deep .dialog-footer{
    margin-top: 20px;
    text-align: center;
  }

}


</style>
